<template>
  <div>
    <van-nav-bar title="登录" />
    <form action="/" method="post">
      <van-cell-group>
        <van-field
        v-model='user.mobile'
        v-validate = "'require | mobile'" name = 'phone'
        :error-message = "errors.first('phone')"
          required
          clearable
          label="用户名"
          right-icon="question-o"
          placeholder="请输入手机号"
        />
        <van-field  type="password" v-model='user.code'
        label="密码" placeholder="请输入密码" required />
      </van-cell-group>
    </form>
    <van-button type="info" block @click.prevent="handleLogin">登录</van-button>
  </div>
</template>

<script>
import { login} from '@/API/user.js'
export default {
  name: "loginIndex",
  data() {
    return {
      user: {
        mobile:'18801185985',
         code:'246810'
      }
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async handleLogin(){
      try {
        const data = await login(this.user)
        console.log(data)
        this.$store.commit('setUser',data)
        
      } catch (error) {
        console.log(error)
      }
    }
  },
};
</script>
<style scoped lang='less'> 
/* @import url(); 引入css类 */
    .van-nav-bar {
      background-color: #0096fa;
      .van-nav-bar__title {
        color: white;
      }
    }
</style>